import React, { Component } from "react";
import {
  Text, TouchableOpacity, View, StyleSheet, Image,
} from "react-native";
import PropTypes from "prop-types";
import DateTimePicker from "react-native-modal-datetime-picker";
import {
  Color, ScreenWidth, FontSize, scale,
} from "../../common";
import { isEmpty, fDateShow } from "../../utils/utils";

export default class DataPickerRow extends Component {
  constructor(props, context) {
    super(props, context);
    const { defaultValue } = props;
    console.log("defaultValue === ", defaultValue);
    this.state = {
      isDateTimePickerVisible: false,
      curTime: fDateShow(defaultValue),
    };
  }
  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

  _handleDatePicked = date => {
    const { onDataSelected } = this.props;
    this._hideDateTimePicker();
    this.setState({ curTime: fDateShow(date) });
    onDataSelected(date);
  };

  render() {
    const {
      name, width, marginTop, disabled,
    } = this.props;
    const { isDateTimePickerVisible, curTime } = this.state;
    return (
      <View>
        <TouchableOpacity onPress={this._showDateTimePicker} disabled={disabled}>
          <View>
            <View style={[styles.container, { width, marginTop }]}>
              <Text style={styles.textName}>{name}</Text>
              <View style={styles.row}>
                <Text style={isEmpty(curTime) ? styles.holder : styles.textValue}>
                  {isEmpty(curTime) ? "请选择时间" : curTime}
                </Text>
              </View>
              <View style={styles.imgArrow}>
                {!disabled && <Image source={require("../../img/ic_arrow_right.png")} style={styles.imgArrow} />}
              </View>
            </View>
          </View>
        </TouchableOpacity>
        <DateTimePicker
          cancelTextIOS="取消"
          confirmTextIOS="确定"
          titleIOS="选择时间"
          mode="datetime"
          is24Hour
          minimumDate={new Date()}
          date={new Date()}
          isVisible={isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
        />
      </View>
    );
  }
}

DataPickerRow.propsTypes = {
  name: PropTypes.string.isRequired,
  onDataSelected: PropTypes.func,
  defaultValue: PropTypes.string,
  width: PropTypes.number,
  marginTop: PropTypes.number,
  disabled: PropTypes.bool,
};

DataPickerRow.defaultProps = {
  onDataSelected: () => {},
  defaultValue: "",
  disabled: false,
  marginTop: scale * 12,
  width: ScreenWidth - 32 * scale,
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    height: 48 * scale,
    alignItems: "center",
  },
  row: {
    flex: 1,
  },
  textName: {
    color: Color.text_content,
    fontSize: FontSize.SIZE_14,
    marginRight: scale * 18,
  },
  holder: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_14,
  },
  textValue: {
    color: Color.text_desc,
    fontSize: FontSize.SIZE_14,
  },
  imgArrow: {
    width: scale * 20,
    height: scale * 20,
  },
});
